<template>
	<view class="ui-image" :class="{'is-border': border}" :style="{ width: width, height: height }" @click="handleClick">
		<view class="ui-image__inner">
			<video class="ui-image__control" :src="innerSrc" :mode="fit"></video>
		</view>
	</view>
</template>

<script>
import { previewImage } from '@/utils/util'
	
	/**
	 * 格式化图片地址
	*/
	function formatImageSrc(src) {
		if (!src) {
			return
		}
		if (src.indexOf('blob:') === 0 || src.indexOf('data:') === 0 || src.indexOf('/') === 0) {
			return src
		}
		if (src.indexOf('http://') === 0) {
		  return 'https://' + src.substr(7)
		}
		if (!(/^(http|https)/i.test(src)) && src.indexOf('//') !== 0) {
		  return 'https://' + src
			return '//' + src
		}
		return src
	}
	
	export default {
		name:"BiOrderVideo",
		props: {
			src: {
				type: String
			},
			previewSrc: {
				type: String
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			fit: {
				type: String,
				default: 'aspectFit'
			},
			border: {
				type: Boolean,
				default: false
			},
			radius: {
				type: String
			},
			previewable: {
				type: Boolean,
				default: true
			},
			stopPropagation: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			style () {
				const sy = {}
				if (this.radius) {
					sy['border-radius'] = this.radius
				}
				if (this.width) {
					sy.width = this.width
				}
				if (this.height) {
					sy.height = this.height
				}
				return sy
			},
			innerSrc () {
				return formatImageSrc(this.src)
			},
			innerPreviewSrc () {
				return formatImageSrc(this.previewSrc)
			}
		},
		methods: {
			preview () {
				if (!this.previewable) {
					return
				}
				const previewSrc = this.innerPreviewSrc || this.innerSrc
				console.log(previewSrc)
				if (previewSrc) {
          uni.previewMedia({
            sources: [
              {
                current: 0,
                urls: [previewSrc],
                type:'video'
              }
            ]
          });
				}

			},
			handleClick (evt) {
				this.preview()
				if (this.stopPropagation) {
					evt.stopPropagation()
				}
			}
		}
	}
</script>

<style lang="scss">
.ui-image{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	background-color: #000;
	&.is-border{
		border: 1px solid #eee;
	}
}
.ui-image__inner{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.ui-image__control{
	height: 100%;
	width: 100%;
}
</style>
